<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XXX后台管理</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="layui/layui.js"></script>
    <script src="layui/lay/modules/layer.js"></script>
    <script src="js/echarts.common.min.js"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="layui/css/modules/layer/default/layer.css">
</head>
<body>

<div style="display: flex;justify-content: space-around">
    <div id="jiemudianboliang" style="width: 40%;height:400px;"></div>
    <div id="jiemudingdanliang" style="width: 600px;height:40%;height:400px;"></div>
</div>
<div style="display: flex;justify-content: center">
    <div id="niandingdanliang" style="width: 70%;height:400px;"></div>
    <div id="dingdanliang" style="height:400px;display: flex;align-items: center">
        <form class="layui-form" action="updateManagerInfo" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">选择年份</label>
                <div class="layui-input-block">
                    <select lay-filter="nianfenSelect" id="nianfenSelect">

                    </select>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var jiemudianboliangChart = echarts.init(document.getElementById('jiemudianboliang'));
    var dingdanliangChart = echarts.init(document.getElementById('jiemudingdanliang'));
    var niandingdanliang = echarts.init(document.getElementById('niandingdanliang'));
    $.get('getAllPublish_order_count').done(function (data) {
        jiemudianboliangChart.hideLoading();
        jiemudianboliangChart.setOption({
            title: {
                text: '节目点播量'
            },
            tooltip: {},
            legend: {
                data: ['节目']
            },
            xAxis: {
                data: data.name
            },
            yAxis: {},
            series: [{
                name: '点播量/次',
                type: 'bar',
                data: data.data
            }]
        });
    });

    $.get('getOrder_publish_count').done(function (data) {
        dingdanliangChart.hideLoading();
        dingdanliangChart.setOption({
            title: {
                text: '节目点比例'
            },
            series: [
                {
                    type: 'pie',
                    radius: '80%',
                    data: data
                }
            ]
        });
    });

    var nian = new Date().getFullYear();
    initNianDingDangLiang(nian);
    for (var i = nian; i > 2016; i--) {
        $("#nianfenSelect").append("<option value='" + i + "'>" + i + "</option>");
    }

    function initNianDingDangLiang(nian) {
        $.get('niandingdanliang?nian=' + nian).done(function (data) {
            niandingdanliang.hideLoading();
            niandingdanliang.setOption({
                title: {
                    text: nian + '年订单量'
                },
                xAxis: {
                    name: '月份',
                    type: 'category',
                    data: data.date
                },
                yAxis: {
                    name: '订单数量',
                    type: 'value'
                },
                series: [{
                    data: data.data,
                    type: 'line'
                }]
            });

        });
        layui.use('form', function () {
            var form = layui.form;
            form.render();
        });
    }

</script>
<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
        form.on('select(nianfenSelect)', function (data) {
            initNianDingDangLiang(data.value);
        });
        // form.render();
    });
</script>
</body>
</html>